<template>
    <el-form
        :model="data"
        :inline="true"
        label-position="right"
        label-width="100px"
        style="margin-top: 20px"
    >
      <el-form-item label="选择房间">
        <el-select
            v-model="data.roomId"
            multiple
            filterable
            collapse-tags
            placeholder="直播间"
            :loading="data.RoomIdListLoading"
        >
          <el-option
              v-for="item in data.RoomIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择日期">
        <el-date-picker
            v-model="data.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="保留人数">
        <el-input-number
            v-model="data.top"
            :min="5"
            :max="20"
            :step="2"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>

    </el-form>
    <div
        v-loading="data.barrageSendUserRankImagesLoading"
        ref="barrage_send_user_rank"
        id="barrage_send_user_rank"
        element-loading-background="rgba(255, 255, 255, 0.3)"
    >
    </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default {
  name: "BarrageWordCloud",
  setup(){
    const { proxy } = getCurrentInstance();
    let myChart
    const data = reactive({
      date:[],
      roomId:[],
      RoomIdList:[],
      top:10,
      RoomIdListLoading:true,
      barrageSendUserRank:[],
      barrageSendUserRankImagesLoading:false
    })
    let barrage_send_user_rank = ref()
    let option = {
      color:['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#A21678','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#f4f1bb','#9381ff','#3498DB','#BFC431',"#908DE2" ],
      title:{
        text:"请选择条件"
      },
      yAxis: {
        data: ["请选择条件"],
        inverse:true,
        realtimeSort:true,
        animationDuration:300,
        name:"名称"
      },
      xAxis: {
        max:"dataMax",
        name:"弹幕量"
      },
      series: {
        type: "bar",
        label: {
          show: true,
          position: 'right',
          valueAnimation: true
        },
        colorBy:"data",
        data: []
      }
    }
    function submit() {
      if(0 === data.roomId.length) {
        ElMessage.error("请选择房间")
        return false
      }
      if(2 > data.date.length) {
        ElMessage.error("请选择开始与结束日期")
        return false
      }
      data.barrageSendUserRankImagesLoading = true;
      proxy.$axios.post("/getBarrageSendTop", {
        startDate:data.date[0],
        endDate:data.date[1],
        roomId:data.roomId,
        top:data.top
      }).then((response) => {
        data.barrageSendUserRank = response.data
        buildImages(data.barrageSendUserRank)
        data.barrageSendUserRankImagesLoading = false;
      });
    }
    function buildImages(barrageSendUserRank) {
      let title = []
      for (let i of barrageSendUserRank) {
        title.push(i.name)
      }
      let option = {
        title:{
          text: data.date[0] + " -- " + data.date[1] +" 弹幕量排名"
        },
        yAxis: {
          data: title
        },
        series: [
          {
            data: barrageSendUserRank
          }
        ]
      }
      option && myChart.setOption(option)
    }
    onMounted(() => {
      data.barrageSendUserRankImagesLoading = true;
      proxy.$axios.post("/getRoomIdList",[])
          .then((response) => {
            data.RoomIdList = response.data
            data.RoomIdListLoading = false
            myChart = echarts.init(barrage_send_user_rank.value)
            myChart.setOption(option)
            data.barrageSendUserRankImagesLoading = false;
          })
    })
    window.onresize = function() {
      myChart.resize();
    };
    return {
      submit,
      barrage_send_user_rank,
      data
    }
  },
  components: [],
}
</script>

<style scoped>
#barrage_send_user_rank {
  width:100%;
  height:100%;
}
</style>